<script setup>
import { artAddChannelService, artEditChannelService } from "@/api/article";
import { ElMessage } from "element-plus";
import { ref } from "vue";
const dialogVisible = ref(false)
const formModel = ref({
    cate_name: '',
    cate_alias: ''

})
const formRef = ref()
const rules = {
    cate_name: [
        {
            required: true,
            message: '分类名称不能为空',
            trigger: 'blur'
        },
        {
            pattern: /^\S{1,10}$/,
            message: '分类别名必须是 1-10位 的非空字符',
            trigger: 'blur'

        }
    ],
    cate_alias: [
        {
            required: true,
            message: '分类别名不能为空',
            trigger: 'blur'
        },
        {
            pattern: /^[a-zA-Z0-9]{1,15}$/,
            message: '分类别名必须是 1-15位 的字母数字',
            trigger: 'blur'

        }
    ],

}
// 子传父  通知父组件，添加 || 编辑成功
const emit = defineEmits(['sucess'])
const confirmBtn = async () => {
    await formRef.value.validate()
    // console.log("验证通过后");
    const isEdit = formModel.value.id
    if (isEdit) {
        await artEditChannelService(formModel.value)
        ElMessage.success('编辑成功')
    } else {
        await artAddChannelService(formModel.value)
        ElMessage.success('添加成功')
    }

    dialogVisible.value = false
    // 触发成功的时间
    emit('sucess')


}
// 组件向外暴露一个方法 open，基于open传来的参数，区分添加还是编辑
// open({}) 空对象 =》 表单无需渲染，说明是添加功能
// open({id,name,...}) 有数据 => 表单需要渲染， 说明是编辑功能
// open调用后，打开弹窗

const open = (row) => {
    console.log(row);
    dialogVisible.value = true
    // 回显
    formModel.value = { ...row }

}
// 向外暴露
defineExpose({
    open
})
</script>
<template>
    <!-- 对话框 -->
    <el-dialog v-model="dialogVisible" :title="formModel.id ? '编辑分类' : '添加分类'" width="30%" :close-on-click-modal="false"
        :show-close="false">
        <el-form :model="formModel" ref="formRef" label-width="100px" style="padding:20px 38px 20px 10px;"
            :rules="rules">
            <el-form-item label="分类名称" prop="cate_name">
                <el-input v-model="formModel.cate_name"></el-input>
            </el-form-item>
            <el-form-item label="分类别名" prop="cate_alias">
                <el-input v-model="formModel.cate_alias"></el-input>
            </el-form-item>
        </el-form>



        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmBtn">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>